<template>
  <div>
    <!-- -->
    <search @getValue="getSonValue"></search>
    <div class="content"  >
      <div class="selectbox">
        <el-select-v2 v-model="value" :options="options.technology" @change="changetechnology" placeholder="技术领域"
          size="large" style="width:130px" />
        <el-select-v2 v-model="value1" :options="options.achievement" placeholder="成果体现形式 " size="large"
          style="width:130px" />
        <el-select-v2 v-model="value2" :options="options.knowledge" placeholder="知识产权形式" size="large"
          style="width:130px" />
        <el-select-v2 v-model="value3" :options="options.ascription" placeholder="成果归属" size="large"
          style="width:130px" />
        <el-select-v2 v-model="value4" :options="options.ripe" placeholder="技术成熟度" size="large" style="width:130px" />
        <el-select-v2 v-model="value5" :options="options.invert" placeholder="拟采取转化方式" size="large"
          style="width:130px" />
        <el-select-v2 v-model="value6" :options="options.unit" placeholder="单位性质" size="large" style="width:130px" />
        <!-- <el-select-v2 v-model="value" :options="options" placeholder="技术领域" size="large"
          style="width: 100px" />
        <el-select-v2 v-model="value" :options="options" placeholder="技术领域" size="large"
          style="width: 100px" />
        <el-select-v2 v-model="value" :options="options" placeholder="技术领域" size="large"
          style="width: 100px" /> -->
      </div>
      
      <div class="contentlist u-m-tb-30">
        <div class="contentlist_item pointer u-m-tb-30" @click="todetail(i.id)" v-for=" (i, index) in acllist">
          <div class="contentlist_item_top">
            <el-image class="elimage" :src="i.achImage.path">
              <template #error>
                <div class="image-slot">
                  <el-icon><icon-picture /></el-icon>
                </div>
              </template>
            </el-image>
            <span>面议</span>
          </div>

          <div class="contentlist_item_bttom">
            <div class="hidden-one u-m-tb-20">
              {{ i.achName }}
            </div>
            <div class="maintext hidden-two">
              {{ i.companyIntr }}
            </div>
            <div class="address u-m-tb-20">
              <span>{{ i.province || '暂无' }}</span>
              <span>{{ i.createTime }}</span>
            </div>
          </div>
        </div>
        <div v-if="acllist==''" style="height: 400px;"  >
          <el-empty class="emptybox"  description="暂无数据~" />
        </div>
      </div>
      <div class="pagniation">
        <el-pagination  v-model:current-page="currentPage3" v-model:page-size="pageSize3" 
           layout="prev, pager, next" :total="1000"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
     
    </div>
  </div>
</template>

<script setup lang="ts">
import search from './search.vue';

import { ref, onMounted, getCurrentInstance,watch } from 'vue';
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { getach } from '@/api/user/index'
const router = useRouter();
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const currentPage3 = ref(1)
const pageSize3 = ref(100)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  currentPage3.value = val
  getacllist()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  currentPage3.value = val
  getacllist()
}
const todetail = (index: number) => {
  router.push({
    path: '/acl/achievementdetail',
    query: {
      id: index
    }
  })
}

import myoptions from './option'
const options = myoptions
const value = ref('')
const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const value4 = ref('')
const value5 = ref('')
const value6 = ref('')
const getSonValue = (e: any) => {
  console.log(e);//子组件传入的值
}
watch([value, value1, value2, value3, value4, value5, value6], ()=>{
 
  getacllist()

})
const { proxy } = getCurrentInstance() as any;

onMounted(() => {
});

const acllist: any = ref([])

function getacllist() {
  proxy.$get('/ach/list', {
    current: currentPage3.value,
    limit: 6,
    field: value.value == '全部' ? '' : value.value,
    achReflect: value1.value == '全部' ? '' : value1.value,
    iprReflect: value2.value == '全部' ? '' : value2.value,
    achAscription: value3.value == '全部' ? '' : value3.value,
    maturity: value4.value == '全部' ? '' : value4.value,
    conMethod: value5.value == '全部' ? '' : value5.value,
    companyType: value6.value == '全部' ? '' : value6.value
  }).then((res: any) => {
    res.data.records.map(item => {
      return item.achImage = JSON.parse(item.achImage)
    })
    acllist.value = res.data.records
  })
}

getacllist()

const changetechnology = (e: any) => {
  getacllist()
}
</script>
<style lang="scss" scoped>
.content {
  width: 1180px;
  margin: 30px auto;
  padding-bottom: 50px;
  position: relative;

  .pagniation {
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
  }

  .selectbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

  }

  .contentlist {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;


    .contentlist_item {
      width: 30%;

      .contentlist_item_top {
        display: flex;
        align-items: self-start;
        justify-content: space-between;

        .elimage {
          width: 140px;
          height: 120px;

          .image-slot {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f5f7fa;
            color: #909399;
            font-size: 30px;
          }
        }

        >span {
          color: $text_color;
          font-size: 20px;
          font-weight: bold;
        }
      }

      .contentlist_item_bttom {
        font-size: 16px;

        .maintext {
          color: #999;
        }

        .address {
          color: #999;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }


}
</style>